<template><div><h1 id="一-过度" tabindex="-1"><a class="header-anchor" href="#一-过度" aria-hidden="true">#</a> 一.过度</h1>
<p>transition 在英文中是过渡的意思，过渡可以为一个元素在不同状态之间切换不同的过渡效果。它由四个部分构
成，分别是：过渡属性的名称，过渡需要的时间，过渡的方式和过渡的延迟时间。</p>
<h2 id="_1-过渡属性的名称" tabindex="-1"><a class="header-anchor" href="#_1-过渡属性的名称" aria-hidden="true">#</a> 1.过渡属性的名称</h2>
<ul>
<li>
<p>transition-property 过渡样式</p>
<p>过渡一定是有变化都，在 <code v-pre>css</code> 中变化都是样式，比如我们需要过渡一个颜色，那么你要过渡的属性名称就是 background-color</p>
</li>
<li>
<p>当过渡多个样式的时候可以写 all</p>
</li>
</ul>
<h2 id="_2-过渡需要的时间" tabindex="-1"><a class="header-anchor" href="#_2-过渡需要的时间" aria-hidden="true">#</a> 2.过渡需要的时间</h2>
<ul>
<li>transition-duration 如果让过渡的感觉柔和一下，那就是需要过渡的时间不是一瞬间的而是慢慢的。</li>
<li>过渡的时间直接是以秒 s 或者 ms 为单位，默认 0s</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token property">transition-property</span><span class="token punctuation">:</span> all<span class="token punctuation">;</span>
<span class="token comment">/* 过渡时间 */</span>
<span class="token property">transition-duration</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">div:hover</span> <span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_3-过渡的方式" tabindex="-1"><a class="header-anchor" href="#_3-过渡的方式" aria-hidden="true">#</a> 3.过渡的方式</h2>
<ul>
<li>
<p>transition-timing-function 过渡方式,过渡方式的不同而在运动中改变速度</p>
</li>
<li>
<p>贝塞尔曲线函数是非常复杂 http://www.css3beziercurve.net/ 函数是非常复杂的，但是</p>
</li>
<li>
<p>在<code v-pre>css </code>中为我们封装了 5 种</p>
<ul>
<li>
<p><strong>默认值，先慢再快最后慢</strong> transition-timing-function:ease;</p>
</li>
<li>
<p><strong>先慢，后越来越快</strong> transition-timing-function:ease-in;</p>
</li>
<li>
<p><strong>速度在开始和结束时都很慢,中间不加速</strong> transition-timing-function:ease-in-out;</p>
</li>
<li>
<p><strong>先快，后越来越慢</strong> transition-timing-function:ease-out;</p>
</li>
<li>
<p><strong>匀速</strong> transition-timing-function:linear;</p>
</li>
</ul>
</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
<span class="token property">transition-property</span><span class="token punctuation">:</span> all<span class="token punctuation">;</span>
<span class="token property">transition-duration</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span>
<span class="token comment">/*默认值，先慢再快最后慢*/</span>
<span class="token property">transition-timing-function</span><span class="token punctuation">:</span> ease<span class="token punctuation">;</span>
<span class="token comment">/*先慢，后越来越快*/</span>
<span class="token property">transition-timing-function</span><span class="token punctuation">:</span> ease-in<span class="token punctuation">;</span>
<span class="token comment">/*速度在开始和结束时都很慢,中间不加速*/</span>
<span class="token property">transition-timing-function</span><span class="token punctuation">:</span> ease-in-out<span class="token punctuation">;</span>
<span class="token comment">/*先快，后越来越慢*/</span>
<span class="token property">transition-timing-function</span><span class="token punctuation">:</span> ease-out<span class="token punctuation">;</span>
<span class="token comment">/*匀速*/</span>
<span class="token property">transition-timing-function</span><span class="token punctuation">:</span> linear<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">body:hover div</span> <span class="token punctuation">{</span>
<span class="token property">left</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_4-过渡的延迟时间" tabindex="-1"><a class="header-anchor" href="#_4-过渡的延迟时间" aria-hidden="true">#</a> 4.过渡的延迟时间</h2>
<ul>
<li>过渡的延迟时间 transition-delay 在过渡效果开始作用之前需要等待的时间，值以秒（s）或毫秒（ms）为单位。</li>
<li>取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">transition-property</span><span class="token punctuation">:</span> all<span class="token punctuation">;</span>
    <span class="token property">transition-duration</span><span class="token punctuation">:</span> 2s<span class="token punctuation">;</span>
    <span class="token property">transition-timing-function</span><span class="token punctuation">:</span> linear<span class="token punctuation">;</span>
    <span class="token comment">/*延迟2s再过渡*/</span>
    <span class="token property">transition-delay</span><span class="token punctuation">:</span> 2s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">body:hover div</span> <span class="token punctuation">{</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_5-简化写法" tabindex="-1"><a class="header-anchor" href="#_5-简化写法" aria-hidden="true">#</a> 5.简化写法</h2>
<ul>
<li>顺序是 transition：过渡时间 延迟时间 过渡方式 过渡样式</li>
<li>注意“执行时间和延迟时间的顺序”不能改变</li>
<li>最简写法：transition：过渡时间；</li>
</ul>
<p><code v-pre>CSS3</code> 过渡动画模板、<code v-pre>CSS3 </code>Transition 动画模板 http://web.chacuo.net/css3transition</p>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
    <span class="token comment">/* 简写 执行时间 延迟时间 过渡方式 过渡属性*/</span>
	<span class="token property">transition</span><span class="token punctuation">:</span> 1s 2s linear all<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_6-多重样式过渡" tabindex="-1"><a class="header-anchor" href="#_6-多重样式过渡" aria-hidden="true">#</a> 6.多重样式过渡</h2>
<p>使用 transition 进行多个样式并且不同时过渡样式时，每一个不同时间的过渡样式需要用逗号分隔。</p>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token comment">/* 注意第二个的延迟时间 */</span>
    <span class="token property">transition</span><span class="token punctuation">:</span> 1s linear background-color<span class="token punctuation">,</span> 1s 1s left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">body:hover div</span> <span class="token punctuation">{</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h1 id="二-变化" tabindex="-1"><a class="header-anchor" href="#二-变化" aria-hidden="true">#</a> 二.变化</h1>
<p>CSS 里变化这个属性属于 css 的一个精彩的革新，transform 属性允许多种变化效果的函数对元素进行改变。
变换分为两种：<code v-pre>2D</code>（重点）和 <code v-pre>3D</code>，需要知道三个轴 <code v-pre>xyz</code>。</p>
<h2 id="_1-transform-变化属性" tabindex="-1"><a class="header-anchor" href="#_1-transform-变化属性" aria-hidden="true">#</a> 1.transform 变化属性</h2>
<p>四个最常用的变化函数，分别是：</p>
<ul>
<li>translate 位移</li>
<li>scale 缩放</li>
<li>rotate 旋转</li>
<li>skew 扭曲</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token comment">/*一个变化函数*/</span>
<span class="token property">transform</span><span class="token punctuation">:</span>变化函数<span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">/*多个变化函数*/</span>
<span class="token property">transform</span><span class="token punctuation">:</span>变化函数<span class="token function">1</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 变化函数<span class="token function">2</span><span class="token punctuation">(</span><span class="token punctuation">)</span> ……
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_2-translate-位移函数" tabindex="-1"><a class="header-anchor" href="#_2-translate-位移函数" aria-hidden="true">#</a> 2.translate()位移函数</h2>
<p>translate()在 2d 变换中位移可以有 X 轴和 Y 轴的位移方向，参数可以使用长度单位，百分比对应的是自己的宽度
和高度，正直或者负值均可。</p>
<ul>
<li>transform: translateX(x); 沿 X 轴方向平移 正值左移 负值右移</li>
<li>transform: translateY(y); 沿 Y 轴方向平移 正值下移 负值上移</li>
<li>transform: translate(x, y); 沿 X 轴和 Y 轴同时平移</li>
<li>注意：位移和固定定为不同，它并没有脱离文档流，也不会影响其他元素的布局</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div:hover</span> <span class="token punctuation">{</span>
    <span class="token comment">/*X轴方向移动*/</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>100px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">/*Y轴方向移动*/</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-100px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">/*默认x轴移动*/</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">/*x轴和y轴一起移动*/</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-100px<span class="token punctuation">,</span> 200px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>元素居中，之前 margin 负值是需要知道元素的宽度和高度，使用 translate 百分比值则不需要</p>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">.box div</span> <span class="token punctuation">{</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span> -50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_3-rotate-旋转函数" tabindex="-1"><a class="header-anchor" href="#_3-rotate-旋转函数" aria-hidden="true">#</a> 3.rotate()旋转函数</h2>
<ul>
<li>rotate()函数在 <code v-pre>2d</code> 变换中旋转只能以 Z 轴进行旋转，所以 rotate()函数默认为 Z 轴旋转函数。</li>
<li>参数为旋转角度，deg 单位为旋转角度。角度可以为正值或负值。</li>
<li>旋转中心点，是元素最中心的点</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div:nth-child(1):hover</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>60deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">div:nth-child(2):hover</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-90deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_4-scale-缩放函数" tabindex="-1"><a class="header-anchor" href="#_4-scale-缩放函数" aria-hidden="true">#</a> 4.scale()缩放函数</h2>
<ul>
<li>scale()缩放函数中的参数是以倍数为基础的，1 代表当前大小</li>
<li>1 以上的“正数”为当前大小的倍数。</li>
<li>1 以下 0 以上的“正数”为缩小的倍数。</li>
<li>0 倍为消失</li>
<li>当参数值为负值的时候，元素进行镜面翻转，同样倍数会起作用</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div:hover</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>2<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>0.3<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleX</span><span class="token punctuation">(</span>0.3<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleY</span><span class="token punctuation">(</span>2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">div:hover</span> <span class="token punctuation">{</span>
     <span class="token comment">/* 负值代表镜面翻转，同样倍数仍然管用 */</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleX</span><span class="token punctuation">(</span>-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleY</span><span class="token punctuation">(</span>-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_5-skew-倾斜扭曲函数" tabindex="-1"><a class="header-anchor" href="#_5-skew-倾斜扭曲函数" aria-hidden="true">#</a> 5.skew()倾斜扭曲函数</h2>
<ul>
<li>skew()在 <code v-pre>2d</code> 变换中倾斜可以有 X 轴和 Y 轴的倾斜角度</li>
<li>填写旋转角度，deg 单位为旋转角度，角度可以为正值或负值。</li>
<li>skew()默认为 X 轴倾斜函数</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div:hover</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">skewX</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">skewX</span><span class="token punctuation">(</span>-45deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">skewY</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">skewY</span><span class="token punctuation">(</span>-45deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">skew</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_6-变换函数的执行顺序" tabindex="-1"><a class="header-anchor" href="#_6-变换函数的执行顺序" aria-hidden="true">#</a> 6.变换函数的执行顺序</h2>
<p>当变换属性需要叠加使用时，不可以生明多个 transform 属性，而是需要把所有要使用的变换函数添加在一个transform 属性中，用空格分隔。但存在前后顺序问题。</p>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token comment">/*用控制台改变旋转角度看效果*/</span>
<span class="token selector">div:nth-child(1):hover</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>200px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>60deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*用控制台改变旋转角度看效果*/</span> 
<span class="token selector">div:nth-child(2):hover</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>60deg<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>200px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_7-基点" tabindex="-1"><a class="header-anchor" href="#_7-基点" aria-hidden="true">#</a> 7.基点</h2>
<p>transform-origin 属性是可以改变元素变化时的原点，默认情况下，元素的中心原点位于 x 轴和 y 轴的 50%处。</p>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">.box1</span> <span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.box1:hover</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateZ</span><span class="token punctuation">(</span>60deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.box2</span> <span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
    <span class="token property">transform-origin</span><span class="token punctuation">:</span> top left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.box2:hover</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateZ</span><span class="token punctuation">(</span>60deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul>
<li>在变化中，任何元素都有一个中心原点。默认情况下，元素的中心原点位于 x 轴和 y 轴的 50%处。</li>
<li>transform-origin 属性取值有两种：一种是“长度值”；另外一种是“关键字”。</li>
<li>当取值为长度值时，单位可以为 px、em 和百分比等。</li>
</ul>
<table>
<thead>
<tr>
<th>关键字</th>
<th>百分比</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>top left</td>
<td>0 0</td>
<td>左上</td>
</tr>
<tr>
<td>top center</td>
<td>50% 0</td>
<td>靠上居左</td>
</tr>
<tr>
<td>top right</td>
<td>100% 0</td>
<td>右上</td>
</tr>
<tr>
<td>left center</td>
<td>0 50%</td>
<td>靠右居中</td>
</tr>
<tr>
<td>center center</td>
<td>50% 50%</td>
<td>正中</td>
</tr>
<tr>
<td>right center</td>
<td>100% 50%</td>
<td>靠右居中</td>
</tr>
<tr>
<td>bottom left</td>
<td>0 100%</td>
<td>左下</td>
</tr>
<tr>
<td>bottom center</td>
<td>50% 100%</td>
<td>靠下居中</td>
</tr>
<tr>
<td>bottom right</td>
<td>100% 100%</td>
<td>右下</td>
</tr>
</tbody>
</table>
<h2 id="_8-3d-变化效果" tabindex="-1"><a class="header-anchor" href="#_8-3d-变化效果" aria-hidden="true">#</a> 8.3D 变化效果</h2>
<h3 id="_1-透视" tabindex="-1"><a class="header-anchor" href="#_1-透视" aria-hidden="true">#</a> (1)透视</h3>
<p>在 css 变换中如果想作出 3d 效果，一定要关注透视距离 perspective 属性。
perspective 属性值越大，元素的变形就越小。
perspective 属性值越小，元素的变形就越大。</p>
<ul>
<li>perspective 属性定义透视距离，距离为长度单位</li>
<li>模拟人眼睛到 3D 变化元素之间的距离</li>
<li>【重点】透视距离只能定义在 3D 变化的父元素上</li>
</ul>
<h3 id="_2-旋转函数-x-轴和-y-轴" tabindex="-1"><a class="header-anchor" href="#_2-旋转函数-x-轴和-y-轴" aria-hidden="true">#</a> (2)旋转函数 x 轴和 y 轴</h3>
<p>2d 中旋转是 z 轴旋转，而想要感受 3d 效果，需要旋转的 x 轴和 y 轴。</p>
<ul>
<li>transform:rotateX(deg); x 轴旋转</li>
<li>transform:rotateY(deg); y 轴旋转</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
    <span class="token comment">/*父级给透视,距离越小感觉离自己越近*/</span>
    <span class="token property">perspective</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.box > div</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.x</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateX</span><span class="token punctuation">(</span>60deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.y</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateY</span><span class="token punctuation">(</span>60deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h1 id="三-动画" tabindex="-1"><a class="header-anchor" href="#三-动画" aria-hidden="true">#</a> 三.动画</h1>
<p>动画就是指定一组或多组成套的动作，按照指定时间，指定的方式自动完成。h5 中动画的运用效率要高于使用 js来体现动画效果，因为动画是渲染式的。</p>
<h2 id="_1-关键帧" tabindex="-1"><a class="header-anchor" href="#_1-关键帧" aria-hidden="true">#</a> 1.关键帧</h2>
<p>@keyframes 是 css 中的@规则，通过在动画序列中定义关键帧的样式，来控制 CSS 动画序列中的步骤。</p>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token atrule"><span class="token rule">@keyframes</span> move</span> <span class="token punctuation">{</span>
    <span class="token comment">/*样式列表*/</span>
    <span class="token selector">0%</span> <span class="token punctuation">{</span>
        <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">100%</span> <span class="token punctuation">{</span>
        <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>600px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_2-动画名称" tabindex="-1"><a class="header-anchor" href="#_2-动画名称" aria-hidden="true">#</a> 2.动画名称</h2>
<p>animation-name 属性就是指定动画要使用哪一个关键帧。</p>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    <span class="token comment">/*这个元素使用关键帧*/</span>
    <span class="token property">animation-name</span><span class="token punctuation">:</span> move<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@keyframes</span> move</span> <span class="token punctuation">{</span>
    <span class="token selector">0%</span> <span class="token punctuation">{</span>
        <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">100%</span> <span class="token punctuation">{</span>
        <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>600px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_3-动画持续时间" tabindex="-1"><a class="header-anchor" href="#_3-动画持续时间" aria-hidden="true">#</a> 3.动画持续时间</h2>
<p>animation-duration 属性代表一个动画周期的时长，单位为秒(s)或者毫秒(ms)，默认值 0 秒。</p>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
    <span class="token comment">/*这个元素使用关键帧*/</span>
    <span class="token property">animation-name</span><span class="token punctuation">:</span> move<span class="token punctuation">;</span>
    <span class="token comment">/* 动画时长 */</span>
    <span class="token property">animation-duration</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@keyframes</span> move</span> <span class="token punctuation">{</span>
    <span class="token selector">0%</span> <span class="token punctuation">{</span>
        <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">100%</span> <span class="token punctuation">{</span>
        <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>600px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_4-动画的运动方式" tabindex="-1"><a class="header-anchor" href="#_4-动画的运动方式" aria-hidden="true">#</a> 4.动画的运动方式</h2>
<p>animation-timing-function 属性跟 transition-timing-function 属性就是过渡的运动方式类似。同样也具有封装好的方式和贝塞尔曲线的方式。</p>
<ul>
<li>
<p>ease;默认</p>
</li>
<li>
<p>ease-in;</p>
</li>
<li>
<p>ease-out;</p>
</li>
<li>
<p>ease-in-out;</p>
</li>
<li>
<p>linear;</p>
</li>
<li>
<p>steps(数值, 定位) 定位：start/end 默认 end 指逐步运动</p>
<p>使用 steps()函数完成，逐帧完成动画效果
loding 图标分为四段和八段完成帧动画</p>
</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
    <span class="token property">margin</span><span class="token punctuation">:</span> 20px auto<span class="token punctuation">;</span>
    <span class="token property">animation-name</span><span class="token punctuation">:</span> zhuan<span class="token punctuation">;</span>
    <span class="token property">animation-duration</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@keyframes</span> zhuan</span> <span class="token punctuation">{</span>
    <span class="token selector">0%</span> <span class="token punctuation">{</span>
    <span class="token punctuation">}</span>
    <span class="token selector">100%</span> <span class="token punctuation">{</span>
        <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token selector">.a1</span> <span class="token punctuation">{</span>
    <span class="token property">animation-timing-function</span><span class="token punctuation">:</span> linear<span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token comment">/*平滑的旋转*/</span>
<span class="token selector">.b1</span> <span class="token punctuation">{</span>
    <span class="token property">animation-timing-function</span><span class="token punctuation">:</span> linear<span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token comment">/*平滑的旋转*/</span>
<span class="token selector">.a2</span> <span class="token punctuation">{</span>
    <span class="token property">animation-timing-function</span><span class="token punctuation">:</span> <span class="token function">steps</span><span class="token punctuation">(</span>4<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token comment">/*断续旋转分4段*/</span>
<span class="token selector">.b2</span> <span class="token punctuation">{</span>
    <span class="token property">animation-timing-function</span><span class="token punctuation">:</span> <span class="token function">steps</span><span class="token punctuation">(</span>8<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token comment">/*断续旋转分8段*/</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_5-动画的延迟时间" tabindex="-1"><a class="header-anchor" href="#_5-动画的延迟时间" aria-hidden="true">#</a> 5.动画的延迟时间</h2>
<p>animation-delay 属性动画的延迟时间和之前过渡的延迟时间一样使用</p>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
    <span class="token comment">/*这个元素使用关键帧*/</span>
    <span class="token property">animation-name</span><span class="token punctuation">:</span> move<span class="token punctuation">;</span>
    <span class="token comment">/* 动画时长 */</span>
    <span class="token property">animation-duration</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span>
    <span class="token comment">/* 运动方式 */</span>
    <span class="token property">animation-timing-function</span><span class="token punctuation">:</span> linear<span class="token punctuation">;</span>
    <span class="token comment">/* 动画延迟时间 */</span>
    <span class="token property">animation-delay</span><span class="token punctuation">:</span> 2s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_6-结束状态" tabindex="-1"><a class="header-anchor" href="#_6-结束状态" aria-hidden="true">#</a> 6.结束状态</h2>
<p>在动画运行到某个位置的时候，动画停止，元素默认会迅速回到起始位置</p>
<ul>
<li>animation-fill-mode :设置动画结束时盒子的状态</li>
<li>属性值： forwards 保持动画结束后的状态</li>
<li>属性值： backwards 动画结束后回到最初的状态</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">.ball</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">animation-name</span><span class="token punctuation">:</span> move<span class="token punctuation">;</span>
    <span class="token property">animation-duration</span><span class="token punctuation">:</span> 2s<span class="token punctuation">;</span>
    <span class="token comment">/*没设置结束状态，会回到最初的状态*/</span>
    <span class="token property">animation-fill-mode</span><span class="token punctuation">:</span> backwards<span class="token punctuation">;</span> <span class="token comment">/*默认*/</span>
    <span class="token property">animation-fill-mode</span><span class="token punctuation">:</span> forwards<span class="token punctuation">;</span> <span class="token comment">/*保持结束时状态*/</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_7-动画化执行顺序" tabindex="-1"><a class="header-anchor" href="#_7-动画化执行顺序" aria-hidden="true">#</a> 7.动画化执行顺序</h2>
<p>animation-direction 属性是动画的执行顺序</p>
<ul>
<li>属性值：normal 正向，默认值</li>
<li>属性值：reverse 反向</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">.hsl</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    <span class="token property">animation-name</span><span class="token punctuation">:</span> move<span class="token punctuation">;</span>
    <span class="token property">animation-duration</span><span class="token punctuation">:</span> 2s<span class="token punctuation">;</span>
    <span class="token comment">/* 动画执行顺序 -反向*/</span>
    <span class="token property">animation-direction</span><span class="token punctuation">:</span> reverse<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_8-动画循环次数" tabindex="-1"><a class="header-anchor" href="#_8-动画循环次数" aria-hidden="true">#</a> 8.动画循环次数</h2>
<ul>
<li>来定义动画的播放次数。</li>
<li>其值通常为整数，但也可以使用带有小数的数字，其默认值为 1，这意味着动画将从开始到结束只播放一次。</li>
<li>如果取值为 infinite ，动画将会无限次的播放。</li>
</ul>
<h2 id="_9-简写方式" tabindex="-1"><a class="header-anchor" href="#_9-简写方式" aria-hidden="true">#</a> 9.简写方式</h2>
<ul>
<li>animation: 动画执行时间 延迟时间 执行关键帧名称 运动方式 运动次数 结束状态;</li>
<li>最简方式 animation: 动画执行时间 执行关键帧名称;</li>
<li>执行时间和延迟时间顺序不可调整</li>
<li>animation: 2s 3s move linear 1 forwards reverse;</li>
</ul>
<h2 id="_10-动画停止" tabindex="-1"><a class="header-anchor" href="#_10-动画停止" aria-hidden="true">#</a> 10.动画停止</h2>
<ul>
<li>animation-play-state 属性规定动画是否正在运行或暂停。</li>
<li>属性值：running 运动的，默认值</li>
<li>属性值：paused 暂停的</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">.box:hover .hsl</span> <span class="token punctuation">{</span>
    <span class="token property">animation-play-state</span><span class="token punctuation">:</span> running<span class="token punctuation">;</span>
    <span class="token property">animation-play-state</span><span class="token punctuation">:</span> paused<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_11-开源-css-动画库" tabindex="-1"><a class="header-anchor" href="#_11-开源-css-动画库" aria-hidden="true">#</a> 11.开源 CSS 动画库</h2>
<h3 id="_1-animate-css-下载与引用" tabindex="-1"><a class="header-anchor" href="#_1-animate-css-下载与引用" aria-hidden="true">#</a> （1）animate.css 下载与引用</h3>
<p>下载:http://www.animate.net.cn/
引用</p>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code>&lt;head>
	&lt;link rel=<span class="token string">"stylesheet"</span> href=<span class="token string">"animate.min.css"</span> />
&lt;/head>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_2-使用方法" tabindex="-1"><a class="header-anchor" href="#_2-使用方法" aria-hidden="true">#</a> （2）使用方法</h3>
<ul>
<li>元素加入需要的类名</li>
<li>当前元素使用 animate 属性，属性值为类名和运行时间</li>
<li>需要在元素先加上 animate__animated 类，之后在加入其他类</li>
</ul>
<div class="language-html line-numbers-mode" data-ext="html"><pre v-pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./animate.min.css<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">div</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    <span class="token property">animation</span><span class="token punctuation">:</span> 1s animate__rubberBand<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>animate__rubberBand<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>元素<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>animate__animated animate__shakeX<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>div2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>自动调用<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h1 id="夜间模式按钮" tabindex="-1"><a class="header-anchor" href="#夜间模式按钮" aria-hidden="true">#</a> 夜间模式按钮</h1>
<div class="language-vue line-numbers-mode" data-ext="vue"><pre v-pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dark==1?'dark':''<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Dark mode<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dark-label<span class="token punctuation">"</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dark-checkbox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dark-checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>clickInput<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ball<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>

      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sun-svg<span class="token punctuation">"</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 0 512 512<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span>
          <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z<span class="token punctuation">"</span></span>
        <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>path</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>moon-svg<span class="token punctuation">"</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 0 512 512<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span>
          <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z<span class="token punctuation">"</span></span>
        <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>path</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">dark</span><span class="token operator">:</span><span class="token number">0</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">clickInput</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>dark<span class="token operator">==</span><span class="token number">1</span><span class="token operator">?</span><span class="token keyword">this</span><span class="token punctuation">.</span>dark<span class="token operator">=</span><span class="token number">0</span><span class="token operator">:</span><span class="token keyword">this</span><span class="token punctuation">.</span>dark<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>scss<span class="token punctuation">"</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token comment">/* devanagari */</span>
<span class="token atrule"><span class="token rule">@font-face</span></span> <span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Poppins'</span><span class="token punctuation">;</span>
  <span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> 300<span class="token punctuation">;</span>
  <span class="token property">font-display</span><span class="token punctuation">:</span> swap<span class="token punctuation">;</span>
  <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2<span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'woff2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">unicode-range</span><span class="token punctuation">:</span> U+0900-097F<span class="token punctuation">,</span> U+1CD0-1CF6<span class="token punctuation">,</span> U+1CF8-1CF9<span class="token punctuation">,</span> U+200C-200D<span class="token punctuation">,</span> U+20A8<span class="token punctuation">,</span> U+20B9<span class="token punctuation">,</span> U+25CC<span class="token punctuation">,</span> U+A830-A839<span class="token punctuation">,</span> U+A8E0-A8FB<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* latin-ext */</span>
<span class="token atrule"><span class="token rule">@font-face</span></span> <span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Poppins'</span><span class="token punctuation">;</span>
  <span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> 300<span class="token punctuation">;</span>
  <span class="token property">font-display</span><span class="token punctuation">:</span> swap<span class="token punctuation">;</span>
  <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLDz8Z1JlFc-K.woff2<span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'woff2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">unicode-range</span><span class="token punctuation">:</span> U+0100-024F<span class="token punctuation">,</span> U+0259<span class="token punctuation">,</span> U+1E00-1EFF<span class="token punctuation">,</span> U+2020<span class="token punctuation">,</span> U+20A0-20AB<span class="token punctuation">,</span> U+20AD-20CF<span class="token punctuation">,</span> U+2113<span class="token punctuation">,</span> U+2C60-2C7F<span class="token punctuation">,</span> U+A720-A7FF<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* latin */</span>
<span class="token atrule"><span class="token rule">@font-face</span></span> <span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Poppins'</span><span class="token punctuation">;</span>
  <span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> 300<span class="token punctuation">;</span>
  <span class="token property">font-display</span><span class="token punctuation">:</span> swap<span class="token punctuation">;</span>
  <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2<span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'woff2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">unicode-range</span><span class="token punctuation">:</span> U+0000-00FF<span class="token punctuation">,</span> U+0131<span class="token punctuation">,</span> U+0152-0153<span class="token punctuation">,</span> U+02BB-02BC<span class="token punctuation">,</span> U+02C6<span class="token punctuation">,</span> U+02DA<span class="token punctuation">,</span> U+02DC<span class="token punctuation">,</span> U+2000-206F<span class="token punctuation">,</span> U+2074<span class="token punctuation">,</span> U+20AC<span class="token punctuation">,</span> U+2122<span class="token punctuation">,</span> U+2191<span class="token punctuation">,</span> U+2193<span class="token punctuation">,</span> U+2212<span class="token punctuation">,</span> U+2215<span class="token punctuation">,</span> U+FEFF<span class="token punctuation">,</span> U+FFFD<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

$<span class="token property">dark-color</span><span class="token punctuation">:</span> #111<span class="token punctuation">;</span>
$<span class="token property">light-color</span><span class="token punctuation">:</span> #eee<span class="token punctuation">;</span>
$<span class="token property">bg-color</span><span class="token punctuation">:</span> #4c6fff<span class="token punctuation">;</span>

<span class="token selector">*,
* *,
*::before,
*::after</span> <span class="token punctuation">{</span>
  <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">#app</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> Poppins<span class="token punctuation">,</span> serif<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">h1</span> <span class="token punctuation">{</span>
  <span class="token property">margin-right</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
  <span class="token property">user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.dark-label</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 20px 0<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 31px<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 2px solid $bg-color<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>

  <span class="token selector">.ball</span> <span class="token punctuation">{</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> $bg-color<span class="token punctuation">;</span>
    <span class="token property">transition</span><span class="token punctuation">:</span> 300ms<span class="token punctuation">;</span>
    <span class="token property">z-index</span><span class="token punctuation">:</span> 99<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">#dark-checkbox</span> <span class="token punctuation">{</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">visibility</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">#dark-checkbox:checked + .ball</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>28px<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">.moon-svg,
  .sun-svg</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">.sun-svg</span> <span class="token punctuation">{</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">.moon-svg</span> <span class="token punctuation">{</span>
    <span class="token property">right</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token selector">.dark</span> <span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> $dark-color<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> $light-color<span class="token punctuation">;</span>

  <span class="token selector">.sun-svg,
  .moon-svg</span> <span class="token punctuation">{</span>
    <span class="token property">fill</span><span class="token punctuation">:</span> $light-color<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h1 id="文字超出部分变成省略号的三种方式" tabindex="-1"><a class="header-anchor" href="#文字超出部分变成省略号的三种方式" aria-hidden="true">#</a> 文字超出部分变成省略号的三种方式</h1>
<h2 id="_1-单行文本溢出显示省略号" tabindex="-1"><a class="header-anchor" href="#_1-单行文本溢出显示省略号" aria-hidden="true">#</a> 1.单行文本溢出显示省略号</h2>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
 <span class="token comment">/*强制文本在一行内显示*/</span>
 <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span> 
 <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
 <span class="token property">text-overflow</span><span class="token punctuation">:</span> ellipsis<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_2-多行文本溢出显示省略号" tabindex="-1"><a class="header-anchor" href="#_2-多行文本溢出显示省略号" aria-hidden="true">#</a> 2.多行文本溢出显示省略号</h2>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
  <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
  <span class="token property">text-overflow</span><span class="token punctuation">:</span> ellipsis<span class="token punctuation">;</span>
  <span class="token comment">/* 将对象作为弹性伸缩盒子模型显示 */</span>
  <span class="token property">display</span><span class="token punctuation">:</span> -webkit-box<span class="token punctuation">;</span>
  <span class="token comment">/* 限制在一个块元素显示的文本的行数 */</span>
  <span class="token comment">/* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/</span>
  <span class="token property">-webkit-line-clamp</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
  <span class="token comment">/* 设置或检索伸缩盒对象的子元素的排列方式 */</span>
  <span class="token property">-webkit-box-orient</span><span class="token punctuation">:</span> vertical<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_3-利用伪类实现省略号" tabindex="-1"><a class="header-anchor" href="#_3-利用伪类实现省略号" aria-hidden="true">#</a> 3.利用伪类实现省略号</h2>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">.t3</span><span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
  <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.t3::after</span><span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">'...'</span><span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">padding-left</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>to right<span class="token punctuation">,</span> transparent<span class="token punctuation">,</span> #fff 55%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div></template>


